<template>
  <div class="box">
    <!-- 头部搜索 -->
    <div class="header">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="商品类型搜索：">
          <el-input v-model="obj.skuName" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            style="background-color: #5f84ff"
            @click="search"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 主体部分 -->
    <div class="body">
      <!-- 新建按钮 -->
      <el-button
        plain
        style="
          background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
          color: #fff
        "
        class="el-icon-circle-plus-outline"
        @click="openPublic('add')"
      >
        新建</el-button>

      <el-button
        type="text"
        plain
        style="background-color: #fbf4f0 !important;width:87px"
        class="button"
        @click="data"
      >
        导入数据</el-button>

      <!-- Table表格 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="100"
          :index="indexMethod"
        />
        <el-table-column prop="skuName" label="商品名称" width="120" />
        <el-table-column label="商品图片" width="120">
          <template #default="{ row }">
            <el-avatar :size="40" :src="row.skuImage" />
          </template>
        </el-table-column>
        <el-table-column prop="brandName" label="品牌" width="120" />
        <el-table-column prop="unit" label="规格" width="120" />
        <el-table-column
          prop="price"
          label="商品价格"
          width="120"
          :formatter="timeFormatter"
        />
        <el-table-column
          prop="skuClass.className"
          label="商品类型"
          width="150"
        />
        <el-table-column prop="createTime" label="创建日期" width="150">
          <template #default="{ row }">
            <span>{{
              row.createTime.substring(0, 10) +
                '  ' +
                row.createTime.substring(11, 19)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="{ row }">
            <el-button
              type="text"
              @click="openPublic('edit', row)"
            >修改</el-button>
          </template>
        </el-table-column></el-table>

      <!-- 分页 -->
      <div v-if="totalPage > 1" class="com_pagination">
        <div class="left">
          <span style="font-size: 16px; color: #dbdfe5">{{
            '共' + totalCount + '条记录 '
          }}</span>
          <span style="font-size: 16px; color: #dbdfe5">{{
            '第' + obj.pageIndex + '/' + totalPage + '页'
          }}</span>
        </div>
        <div class="right">
          <el-button
            class="btn_footer"
            size="small"
            :disabled="obj.pageIndex >= totalPage"
            style="background-color: #d5ddf8"
            @click="setTablePage(1)"
          >下一页</el-button>
          <el-button
            class="btn_footer"
            size="small"
            style="background-color: #d5ddf8"
            :disabled="obj.pageIndex === 1"
            @click="setTablePage(-1)"
          >上一页</el-button>
        </div>
      </div>

    </div>

    <!-- 新建、修改弹窗 -->
    <el-dialog
      :title="publicTitle"
      :visible.sync="dialogVisible"
      width="700px"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="商品名称：" label-width="150px" prop="skuName">
          <el-input
            v-model="form.skuName"
            type="text"
            placeholder="请输入"
            maxlength="10"
            show-word-limit
            style="width: 490px"
          />
        </el-form-item>

        <el-form-item label="品牌：" label-width="150px" prop="brandName">
          <el-input
            v-model="form.brandName"
            type="text"
            placeholder="请输入"
            maxlength="10"
            show-word-limit
            style="width: 490px"
          />
        </el-form-item>

        <el-form-item label="商品价格（元）：" label-width="150px" prop="price">
          <el-input-number
            v-model="form.price"
            placeholder="请输入"
            :step="0.5"
            style="width: 490px"
            controls-position="right"
            :min="0.5"
          />
        </el-form-item>

        <el-form-item label="商品类型：" label-width="150px" prop="classId">
          <el-select
            v-model="form.classId"
            placeholder="请选择"
            style="width: 490px"
          >
            <el-option
              v-for="item in tableData"
              :key="item.classId"
              :label="item.skuClass.className"
              :value="item.skuClass.classId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="规格：" label-width="150px" prop="unit">
          <el-input
            v-model="form.unit"
            style="width: 490px"
            type="text"
            placeholder="请输入"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="商品图片：" label-width="150px" prop="skuImage">
          <!-- 图片 -->
          <TuPian v-model="form.skuImage" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer" style="margin-right: 170px">
        <el-button
          style="
            background-color: #fbf4f0 !important;
            border: none;
            margin-right: 20px;
          "
          @click="dialogVisible = false"
        >取 消</el-button>
        <el-button
          type="primary"
          style="
            background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
            color: #fff;
            margin-right: 90px;
            border: none;
          "
          @click="submit"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 导入数据弹窗 -->
    <WenJian :is-show.sync="isShow" />
  </div>
</template>

<script>
import TuPian from './components/tupian.vue'
import WenJian from './components/wenjian.vue'
import { getManage, addManage, editManage } from '@/api/guanli'
export default {
  components: {
    TuPian,
    WenJian
  },

  data() {
    return {
      publicType: 'add',
      isShow: false,
      imageUrl: '',
      num: 0.5,
      dialogVisible: false,
      tableData: [],
      obj: {
        skuName: null,
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: null,
      totalPage: null,
      form: {
        skuName: null,
        skuImage: null,
        brandName: null,
        price: undefined,
        unit: null,
        classId: null
      },
      skuId: null,
      rules: {
        skuName: [{ required: true, message: '请输入', trigger: 'blur' }],
        brandName: [{ required: true, message: '请输入', trigger: 'blur' }],
        price: [{ required: true, message: '请输入', trigger: 'blur' }],
        skuClass: [{ required: true, message: '请输入', trigger: 'blur' }],
        unit: [{ required: true, message: '请输入', trigger: 'blur' }],
        skuImage: [{ required: true, message: '请上传', trigger: 'blur' }]
      },
      input: ''
    }
  },
  computed: {
    publicTitle() {
      if (this.publicType === 'add') {
        return '新增商品:'
      }
      if (this.publicType === 'edit') {
        return '修改商品:'
      } else {
        return 'add'
      }
    }
  },
  // 渲染
  created() {
    this.rendering()
  },

  methods: {
    // 获取列表
    async rendering() {
      const data = await getManage(this.obj)
      this.tableData = data.currentPageRecords
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
    },

    // 序号排序
    indexMethod(index) {
      return index + this.obj.pageSize * (this.obj.pageIndex - 1) + 1
    },

    // 价格转化小数
    timeFormatter(row) {
      return parseFloat(row.price / 100).toFixed(2)
    },

    // 查询完成
    search() {
      this.rendering()
    },

    // 新增/修改
    openPublic(type, row) {
      // console.log(this.skuId)
      this.publicType = type
      if (type === 'edit') {
        this.skuId = row.skuId
        this.form.skuName = row.skuName
        this.form.skuImage = row.skuImage
        this.form.brandName = row.brandName
        this.form.price = row.price
        this.form.unit = row.unit
        this.form.classId = row.classId
      }
      this.dialogVisible = true
    },

    // 提交
    async submit() {
      if (this.publicType === 'add') {
        try {
          this.$refs.form.validate()
          await addManage(this.form)
          this.$message.success('添加成功')
          this.dialogVisible = false
          this.rendering()
        } catch (error) {
          this.$message.error('添加失败')
        }
      }
      if (this.publicType === 'edit') {
        try {
          await editManage({ skuId: this.skuId, ...this.form })
          this.$message.success('修改成功')
          this.dialogVisible = false
          this.rendering()
        } catch (error) {
          this.$message.error('修改失败')
        }
      }
    },
    // 导入数据点击
    async  data() {
      this.isShow = true
      // this.$refs['excel-upload-input'].click()
    },

    // 分页
    setTablePage(value) {
      this.obj.pageIndex += value
      this.rendering()
    }

  }
}
</script>

<style scoped lang="scss">
.box {
  padding: 20px;
}
.header {
  height: 60px;
  padding: 10px 10px;
  background-color: #fff;
}
.body {
  margin-top: 20px;
  padding: 10px 10px;
  background-color: #fff;
}

.button {
  color: #655b56 !important;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
::v-deep .avatar-uploader-icon[data-v-2aa0c494] {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
.com_pagination {
 font-size: 16px;
 color: #dbdfe5 !important;
 padding: 32px 16px;
}
.btn_footer {
 float: right;
 margin-left: 10px;
}
</style>
